<template>
    <div>
    <el-header ><h3>服务订单</h3></el-header>
   
    <el-table :row-class-name="tableRowClassName"
      :data="tableData"
      border
       height="550"
      style="width: 100%">
      <!-- 图片测试 -->
          <el-table-column
        label="图片详情"

        align="center">
         <template slot-scope="scope">
        <span v-if="scope.row.photo">
          <img width="95" :src="scope.row.photo">
        </span>

        </template>
      </el-table-column>

        <el-table-column
        prop="serviceMerchant.name"
        label="服务商家"

        align="center">
      </el-table-column>
      <el-table-column
        prop="type"
        label="服务类型"

        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="服务名称"

        align="center">
      </el-table-column>
       <el-table-column
        prop="introduce"
        label="服务介绍"

        align="center">
      </el-table-column>
      <el-table-column
        prop="supportTime"
        label="服务时间"

        align="center">
      </el-table-column>
            <el-table-column
        prop="price"
        label="价格"

        align="center">
      </el-table-column>

      <el-table-column
        label="操作"

        align="center">
        <!-- slot-scope="scope" -->
        <template slot-scope="scope">
          <!-- type里的选项只是颜色 -->
          <!-- 这些方法用于打开对话框，名字要和真正实现的方法，事件名区分 -->
          <el-button type="success" size="mini" @click="info(scope)">查看</el-button><br>
          <el-button type="primary" size="mini" @click="buy(scope)">下单</el-button>

        </template>
      </el-table-column>
    </el-table>

   <!--  <detail :current="current" @close="close"></detail> -->

    </div>
</template>

<script>
// import detail from './Servicedetail.vue'
export default {
     data() {
      return{
           tableData:[],
          // service:{
          //   name:"",
          //   introduce:"",
          //   supportTime:"",
          //   price:""
          // }
          key:"",
          current:{},
         // dialogVisible:false
      }
    },
        methods:{
          tableRowClassName({row, rowIndex}) {
                  if (rowIndex%2 === 1) {
                    return 'warning-row';
                  } else if (rowIndex%2 === 0) {
                    return 'success-row';
                  }
                  return '';
                },
                //查看详情
      info:function(scope){
        // scope.$index  获取当前第几个元素被点击了
        // scope.row 获取当前行的数据
        console.log(this.tableData)
        this.current = scope.row
        this.$router.push({
            path:'/Servicedetail',
            // 同级路由传参方式
            query:{

                current:this.current

            }
        })
        // 显示对话框
       // this.dialogVisible = true
      },
          close:function(){
         //this.dialogVisible = false
      },
          // 搜索
        find:function(){
        // alert(this.key)
      this.$axios.get("http://localhost:8080/serving/findbycidandintroduce/"+window.sessionStorage.getItem("cid")+"/"+this.key).then(res=>{
        if(res.data.status=="SUCCESS"){
          console.log("开心，查到了")
          this.tableData=res.data.data
          // this.tableData=JSON.parse(JSON.stringify(this.tableData))

        }
      })
      },
      buy:function(scope){
         // scope.$index  获取当前第几个元素被点击了
        // scope.row 获取当前行的数据
        console.log(scope.row)
        this.current = scope.row
        console.log("hhhhhhh")
        console.log("获取的mid:"+this.current.serviceMerchant.id)
        console.log("获取的cid:"+this.current.cid)
        console.log("获取的status:"+this.current.status)
        console.log("获取的price:"+this.current.price)
         this.$router.push({
            path:'/buyservice',
            query:{
                mid:this.current.serviceMerchant.id,
                iid:this.current.id,
                cid:this.current.cid,
                status:this.current.status,
                price:this.current.price
            }
        })
      }

    },
    //   components:{
    //   detail

    // },
        mounted(){
      this.$axios.get("http://localhost:8080/service/goods/findAll/"+parseInt(window.sessionStorage.getItem("cid"))).then(res =>{
        //  console.log(res.data)
        // console.log(res.data.data)
        this.tableData = res.data.data
        // for(i=0;i<this.tableData.length;i++){
        //   if(this.tableData[i].photo.equals)
        // }
        // console.log("长度"+this.tableData.length)

      })
    }

}
</script>

<style>
    .el-table .warning-row {
        background: oldlace;
      }

      .el-table .success-row {
        background: #f0f9eb;
      }
</style>
